<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: ZJZ
 * @Date: 2021-05-07 14:43:37
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:21:25
-->
<template>
  <div class="app-container">
    <div class="header">
      <span class="selfSeting">自定义字段</span>
    </div>
    <div class="body">
      <div class="add">
        <div class="library">
          <span class="ziKu">字段库</span>
          <div class="library-btn">
            <div class="btn" @click="onAdd(1)">
              <i class="iconfont icon-danhangwenben"></i>
              <span>单行文本</span>
              <!-- <el-button plain >单行文本</el-button> -->
            </div>
            <div class="btn" @click="onAdd(2)">
              <i class="iconfont icon-duohangwenben"></i>
              <span>多行文本</span>
              <!-- <el-button plain ></el-button> -->
            </div>
            <div class="btn" @click="onAdd(3)">
              <i class="iconfont icon-duoxuan"></i>
              <span>多选</span>
              <!-- <el-button plain></el-button> -->
            </div>
            <!-- <div class="btn">
                <el-button plain @click="onAdd(4)">单选</el-button>
              </div> -->
            <div class="btn" @click="onAdd(5)">
              <i class="iconfont icon-xialakuang"></i>
              <span>下拉框</span>
              <!-- <el-button plain ></el-button> -->
            </div>
            <div class="btn" @click="onAdd(6)">
              <i class="iconfont icon-shuzi"></i>
              <span>数字</span>
              <!-- <el-button plain ></el-button> -->
            </div>
            <div class="btn" @click="onAdd(7)">
              <i class="iconfont icon-shoujihao"></i>
              <span>手机号</span>
              <!-- <el-button plain></el-button> -->
            </div>
            <div class="btn" @click="onAdd(8)">
              <i class="iconfont icon-youxiang"></i>
              <span>邮箱</span>
              <!-- <el-button plain></el-button> -->
            </div>
            <div class="btn" @click="onAdd(9)">
              <i class="iconfont icon-shangchuantupian"></i>
              <span>上传图片</span>
              <!-- <el-button plain ></el-button> -->
            </div>
            <div class="btn" @click="onAdd(10)">
              <i class="iconfont icon-shangchuanfujian"></i>
              <span>上传附件</span>
              <!-- <el-button plain ></el-button> -->
            </div>
            <div class="btn" @click="onAdd(11)">
              <i class="iconfont icon-riqi"></i>
              <span>日期</span>
              <!-- <el-button plain></el-button> -->
            </div>
          </div>
        </div>
      </div>
      <div class="middle">
        <div class="middle-top">
          <div class="middle-top-edit">编辑字段</div>
          <div class="footer">
            <div class="goBack" @click="$router.push('/registerSet/field')">
              取消
            </div>
            <div class="bc" @click="onSubmit">保存</div>
            <div class="previwe" @click="preview">预览</div>
            <!-- <el-button
              size="default"
              @click="$router.push('/registerSet/field')"
            >
              取消
            </el-button>
            <el-button type="primary" size="default" @click="onSubmit">
              保存
            </el-button>
            <el-button type="primary" size="default" @click="preview" plain>
              预览
            </el-button> -->
          </div>
        </div>
        <div class="content">
          <main-content
            v-for="(item, index) in formList"
            :key="index"
            :formList="item"
            @click.native="onChange(item, index)"
            :class="active === index ? 'active' : ''"
            class="main"
          >
            <slot>
              <template>
                <i
                  :class="active === index ? 'iconfont icon-close' : ''"
                  @click.stop="del(index)"
                ></i>
              </template>
            </slot>
          </main-content>
        </div>
      </div>

      <div class="attribute">
        <span>属性设置</span>
        <attri-bute :seting="seting" v-if="setShow && seting"></attri-bute>
      </div>
    </div>

    <el-dialog
      title="预览"
      :visible.sync="dialogProview"
      width="60%"
      custom-class="dialogClass"
      :close-on-click-modal="false"
      class="previewDia"
    >
      <main-content
        v-for="(item, index) in formList"
        :key="index"
        :formList="item"
        class="dialog-content"
      ></main-content>
      <span slot="footer">
        <el-button @click="dialogProview = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import { customField, getCustomFieldList } from "@/api/signUp";
import AttriBute from "./conponents/attriBute.vue";
import MainContent from "./conponents/mainContent.vue";
export default {
  components: {
    MainContent,
    AttriBute,
  },
  data() {
    return {
      flag: true,
      dialogProview: false,
      setShow: true,
      active: 0,
      examType: Number,
      formList: [],
      seting: {},
    };
  },
  created() {
    var url = window.location.href;
    var arr = url.split("=");
    this.examType = arr[1];
    this.getFieldList();
  },
  methods: {
    // 获取自定义表单
    getFieldList() {
      getCustomFieldList({
        examType: this.examType,
      }).then((res) => {
        this.formList = res.rows;
        this.onChange(this.formList[0], 0);
      });
    },
    onChange(item, i) {
      this.active = i;
      this.seting = item;
      this.setShow = true;
    },
    // 添加
    onAdd(num) {
      this.active = this.formList.length;
      if (num === 1) {
        this.formList.push({
          type: 1,
          name: "单行文本",
          inputTips: "请输入",
          fieldType: "",
          isNull: false,
          isHidden: true,
          text: "",
          disab: 1,
          rules: {
            text: [
              {
                required: false,
                message: "请检查是否输入正确",
                trigger: "blur",
              },
            ],
          },
        });
      } else if (num === 2) {
        this.formList.push({
          type: 2,
          name: "多行文本",
          fieldType: "",
          inputTips: "请输入",
          rowText: "",
          isNull: false,
          isHidden: true,
          disab: 1,
          rules: {
            rowText: [
              {
                required: true,
                message: "请检查是否输入正确",
                trigger: "blur",
              },
            ],
          },
        });
      } else if (num === 3) {
        this.formList.push({
          type: 3,
          name: "多选",
          fieldType: "",
          required: false,
          isNull: false,
          isHidden: true,
          choiceList: [],
          disab: 1,
          rules: {
            choiceList: [
              {
                required: false,
                message: "请检查是否选择",
                trigger: "change",
              },
            ],
          },
          labelOptions: [
            {
              value: "0",
              label: "选项1",
            },
            {
              value: "1",
              label: "选项2",
            },
          ],
        });
      } else if (num === 4) {
        this.formList.push({
          type: 4,
          name: "单选",
          value: "选项一",
          value1: "选项二",
          fieldType: "",
          isNull: false,
          isHidden: true,
          required: false,
          radio: "1",
          disab: 1,
          rules: {
            radio: [
              {
                required: false,
                message: "请检查是否选择",
                trigger: "change",
              },
            ],
          },
        });
      } else if (num === 5) {
        this.formList.push({
          type: 5,
          name: "下拉框",
          fieldType: "",
          isNull: false,
          isHidden: true,
          inputTips: "请选择",
          disab: 1,
          dropDown: "",
          labelOptions: [
            {
              value: "0",
              label: "选项一",
            },
            {
              value: "1",
              label: "选项二",
            },
          ],
          rules: {
            dropDown: [
              {
                required: false,
                message: "请选择",
                trigger: "change",
              },
            ],
          },
        });
      } else if (num === 6) {
        this.formList.push({
          type: 6,
          name: "数字",
          fieldType: "",
          inputTips: "请输入",
          isNull: false,
          isHidden: true,
          disab: 1,
          num: "",
          rules: {
            num: [
              {
                required: false,
                message: "请检查是否输入正确",
                trigger: "blur",
              },
            ],
          },
        });
      } else if (num === 7) {
        this.formList.push({
          type: 7,
          name: "手机号",
          fieldType: "",
          inputTips: "请输入",
          isNull: false,
          isHidden: true,
          disab: 1,
          phone: "",
          rules: {
            phone: [
              {
                required: false,
                message: "请检查是否输入正确",
                trigger: "blur",
              },
            ],
          },
        });
      } else if (num === 8) {
        this.formList.push({
          type: 8,
          name: "邮箱",
          inputTips: "请输入",
          disab: 1,
          mailbox: "",
          isNull: false,
          isHidden: true,
          rules: {
            mailbox: [
              {
                required: false,
                message: "请检查是否输入正确",
                trigger: "blur",
              },
            ],
          },
        });
      } else if (num === 9) {
        this.formList.push({
          type: 9,
          fieldType: "",
          name: "上传图片",
          disab: 1,
          fileImg: [],
          isNull: false,
          isHidden: true,
          rules: {
            fileImg: [
              {
                required: false,
                message: "请检查是否已上传图片",
                trigger: "change",
              },
            ],
          },
        });
      } else if (num === 10) {
        this.formList.push({
          type: 10,
          name: "上传附件",
          fieldType: "",
          disab: 1,
          isNull: false,
          isHidden: true,
          fileList1: [],
          rules: {
            fileList1: [
              {
                required: false,
                message: "请检查是否已上传附件",
                trigger: "change",
              },
            ],
          },
        });
      } else if (num === 11) {
        this.formList.push({
          type: 11,
          name: "日期",
          fieldType: "",
          inputTips: "请选择时间",
          disab: 1,
          dates: "",
          isNull: false,
          isHidden: true,
          rules: {
            dates: [
              {
                required: false,
                message: "请检查是否输入正确",
                trigger: "blur",
              },
            ],
          },
        });
      }
      this.seting = this.formList[this.formList.length - 1];
    },
    // 删除
    del(i) {
      this.formList.splice(i, 1);
      this.setShow = false;
    },
    preview() {
      this.dialogProview = true;
    },
    async onSubmit() {
      if (this.formList.length == 0)
        return this.$message.info("请至少添加一条自定义字段！");
      // if (this.flag !== true) return;
      // this.flag = false;
      let a = this.formList.some((x) => {
        return x.name == "";
      });
      if (a == true) return this.$message.info("有标识名为空，请填写！");
      for (var i = 0; i < this.formList.length; i++) {
        for (var j = i + 1; j < this.formList.length; j++) {
          if (this.formList[i].name == this.formList[j].name) {
            return this.$message.error("有相同标识名，请修改");
          }
        }
      }
      var fd = new FormData();
      this.formList.map((item) => {
        Vue.set(item, "examType", this.examType);
      });
      fd.append("customFields", JSON.stringify(this.formList));
      fd.append("examType", this.examType);
      let res = await customField(fd);
      // let { data: res } = await customField({
      //   customField: this.list,
      // });
      this.$message.success(res.msg);
      this.flag = true;
      this.$router.push("/registerSet/field");
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #ececec;
  line-height: 60px;
}
/deep/ .el-card__header {
  width: 100%;
  height: 100px;
}
.selfSeting {
  display: inline-block;
  width: 50%;
  font-size: 16px;
  font-weight: 700;
}

.body {
  height: 86vh;
  display: flex;
  .add {
    width: 20%;
    height: 91vh;
    border-right: 1px solid #ececec;
    .library {
      padding-top: 20px;
      padding-right: 10px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      span {
        font-size: 16px;
      }
      .ziKu {
        font-size: 14px;
        font-weight: 700;
      }
      .library-btn {
        display: flex;
        flex-wrap: wrap;
        margin-top: 34px;
        .btn {
          margin-left: 10px;
          margin-top: 10px;
          height: 34px;
          line-height: 34px;
          width: 130px;
          padding-left: 20px;
          cursor: pointer;
          background-color: #ebf3ff;
          border-radius: 4px;
          i {
            margin-right: 5px;
            color: #1267fa;
          }
          span {
            font-size: 14px;
          }
        }
      }
    }
  }
  .content {
    overflow: hidden;
    overflow-y: auto;
    width: 100%;
    // height: 89%;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 40px;
    // border-right: 1px solid #ececec;
    /deep/ .el-form--label-top {
      width: 330px;
    }
    .el-form--label-top:nth-child(1) {
      margin-top: 20px;
    }
    .main:nth-last-child {
      margin-bottom: 20px;
    }
  }
}

.main {
  padding-left: 20px;
  width: 50%;
  /deep/ .el-form-item {
    padding-bottom: 10px;
  }
}
// .main:nth-last-child(1) {
//   margin-bottom: 20px;
// }
.active {
  background-color: #eee;
}
.icon-close {
  position: relative;
  &::before {
    position: absolute;
    right: -400px;
    top: -40px;
  }
}
.attribute {
  overflow: hidden;
  overflow-y: auto;
  padding-top: 20px;
  padding-left: 34px;
  height: 89vh;
  border-left: 1px solid #ececec;
  span {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 20px;
  }
}
.footer {
  margin-top: 20px;
  height: 97px;
  display: flex;
  .goBack {
    height: 28px;
    line-height: 28px;
    width: 64px;
    background-color: #fff;
    border: 1px solid #ececec;
    border-radius: 4px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1f2e4d;
    text-align: center;
    cursor: pointer;
  }
  .bc {
    height: 28px;
    line-height: 28px;
    width: 64px;
    background-color: #1267fa;
    border-radius: 4px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    cursor: pointer;
    margin: 0 10px;
  }
  .previwe {
    width: 64px;
    height: 28px;
    line-height: 28px;
    border-radius: 4px;
    border: 1px solid #1267fa;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1267fa;
    text-align: center;
    cursor: pointer;
  }
}
/deep/.el-dialog__body {
  display: flex;
  flex-wrap: wrap;
  height: 600px;
  overflow-y: auto;
}
.dialog-content {
  width: 45%;
}
/deep/ .el-form-item__error {
  display: none;
}
.middle {
  width: 50%;
  height: 90vh;
  overflow: auto;
  .middle-top {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    line-height: 72px;
    .middle-top-edit {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #1f2e4d;
    }
  }
}
.previewDia {
  width: 100%;
  .dialog-content {
    width: 50%;
    padding-left: 60px;
  }
}
</style>